import QtQuick 1.1
import QtWebKit 1.0
import com.nokia.meego 1.0
//import TextButton as TButton

Page {
    id: rectangle1
    width: 480
    height: 854

    //////////////////////////////////////   startup function
    function startup()
    {
//        if (mainApp.getdrivecity() !== null && mainApp.getdrivecity() !== " " && mainApp.getdrivecity() !== "") //1 line changed in 11.05.27
//        {
//            web_view_map.city = mainApp.getdrivecity();
//            js.city = mainApp.getdrivecity();
//            console.log("startup... " + js.city + " , " + web_view_map.city);
//        }

    }
    Component.onCompleted:
    {
        rectangle1.startup();
    }//startup();

    //////////////////////////////       webview interface
    WebView {
        id: web_view_map
        x: 0
        y: 0
        width: parent.width
        height: parent.height - 120
        //anchors.fill: parent
        url: "baidumap.html"

        property string start: ""
        property string end: ""
        property string city: ""
        property string lat: "23.0"
        property string lon: "117.0"

        settings.javascriptEnabled : true
        settings.javaEnabled : true
        settings.pluginsEnabled : true
//        settings.privateBrowsingEnabled : true
//        settings.javascriptCanAccessClipboard : true
//        settings.javascriptCanOpenWindows : true
//        settings.localContentCanAccessRemoteUrls : true
        settings.offlineWebApplicationCacheEnabled : true
        settings.offlineStorageDatabaseEnabled : true
        settings.localStorageDatabaseEnabled : true

        pressGrabTime: 0

        onAlert: console.log("alert: " + message)

        function setcenter ()
        {
            //console.log("setcenter");
            web_view_map.lat = mainApp.getlatitude();
            web_view_map.lon = mainApp.getlongtitude();
            console.log(web_view_map.lat + " , " + web_view_map.lon);
            evaluateJavaScript("map.panTo(new BMap.Point('"+ web_view_map.lon + "', '"+ web_view_map.lat + "'))");
        }


        function zoomIn() {
            evaluateJavaScript("map.zoomIn()");
             console.log("fuck..1....");
        }

        function zoomOut() {
            evaluateJavaScript("map.zoomOut()");
            console.log("fuck..2....");
        }

        function setCity(cityname)
        {
            //var aa = evaluateJavaScript("myGeo.getPoint('" + cityname + "', function(point){if (point) {map.centerAndZoom(point, 11);}}, '" + cityname + "');");

            //百度API v1.2的更新使上语句失效，改为下语句

            evaluateJavaScript("map.centerAndZoom('" + cityname + "');");
            mainApp.setDrivecity(cityname);
            //console.log(aa);
        }

        function getRoute()
        {
            evaluateJavaScript("map.clearOverlays()");
            evaluateJavaScript("transit.search('" + web_view_map.start + "', '" + web_view_map.end + "');");
            console.log("get route executed");
            //web_view_map.html.search.
        }

        function getDrive()
        {
            evaluateJavaScript("map.clearOverlays()");
            evaluateJavaScript("driving.search('" + web_view_map.start + "', '" + web_view_map.end + "');");
            console.log("get drive executed");
            //web_view_map.html.search.
        }

        function search(addr)
        {
            evaluateJavaScript("local.search('" + addr + "');");
        }

        function setsearchresult_poi (poi)
        {
            evaluateJavaScript("map.clearOverlays()");
            evaluateJavaScript("map.addOverlay(new BMap.Marker(new BMap.Point("+ poi + ")))");
/* bug */            //evaluateJavaScript("map.centerAndZoom(new BMap.Point("+ poi + ", 7))");
            evaluateJavaScript("map.panTo(new BMap.Point(" + poi + "))");
            //evaluateJavaScript("map.centerAndZoom(new BMap.Point("+ poi + "))");

        }

        /////////////////////////////////////////////////// //  js for html inside the WebView
        javaScriptWindowObjects: QtObject {
         id:js
         WebView.windowObjectName: "qml"
         property string route: ""
         property string city: "北京市"

         property string title0: ""
         property string title1: ""
         property string title2: ""
         property string title3: ""
         property string title4: ""
         property string title5: ""
         property string title6: ""
         property string title7: ""
         property string title8: ""
         property string title9: ""

         property string addr0: ""
         property string addr1: ""
         property string addr2: ""
         property string addr3: ""
         property string addr4: ""
         property string addr5: ""
         property string addr6: ""
         property string addr7: ""
         property string addr8: ""
         property string addr9: ""

         property string poi0: ""
         property string poi1: ""
         property string poi2: ""
         property string poi3: ""
         property string poi4: ""
         property string poi5: ""
         property string poi6: ""
         property string poi7: ""
         property string poi8: ""
         property string poi9: ""

         function searchsuccess()
         {
             console.log("search success");
             mainApp.useInfobox("搜索成功！");
         }

         function qmlCall() {
             //console.log("fuck..qmlcall from html....");
            //web_view_map.evaluateJavaScript("alert('This call is in QML! oh fuck!!!!!!!')");
             addressmodel.clear();
             addressmodel.append({"title" : js.title0 , "addr" : js.addr0 , "poi" : js.poi0 });
             addressmodel.append({"title" : js.title1 , "addr" : js.addr1 , "poi" : js.poi1 });
             addressmodel.append({"title" : js.title2 , "addr" : js.addr2 , "poi" : js.poi2 });
             addressmodel.append({"title" : js.title3 , "addr" : js.addr3 , "poi" : js.poi3 });
             addressmodel.append({"title" : js.title4 , "addr" : js.addr4 , "poi" : js.poi4 });
             addressmodel.append({"title" : js.title5 , "addr" : js.addr5 , "poi" : js.poi5 });
             addressmodel.append({"title" : js.title6 , "addr" : js.addr6 , "poi" : js.poi6 });
             addressmodel.append({"title" : js.title7 , "addr" : js.addr7 , "poi" : js.poi7 });
             addressmodel.append({"title" : js.title8 , "addr" : js.addr8 , "poi" : js.poi8 });
             addressmodel.append({"title" : js.title9 , "addr" : js.addr9 , "poi" : js.poi9 });

           }

         function showroute()
         {
             console.log(route);
             //text_route.text = route;
             //flickable1.y = 55;
         }

       }

        states: [
            State {
                name: "state1"
                PropertyChanges {
                    target: web_view_map
                    x:-web_view_map.width
                }
            }
        ]

        transitions: [
            Transition {
                from: ""
                to: "state1"
                NumberAnimation
                {
                    property: "x";
                    duration: 300
                    easing.type: "OutQuad"
                }
            },

            Transition {
                from: "state1"
                to: ""
                NumberAnimation
                {
                    property: "x"
                    duration: 300
                    easing.type: "OutQuad"
                }
            }
        ]

        ///////////////////////////////////////  zoom
        Item {
            id: item_zoom
//            x: 22
//            y: 366
            width: 160
            height: 68
            rotation: -90
//            anchors.left: parent.left
//            anchors.bottom: parent.bottom
//            anchors.leftMargin: 22
//            anchors.bottomMargin: 20
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: 70
            anchors.right: parent.right
            anchors.rightMargin: -25

            Image {
                id: image_zoombg
                opacity: 0.4
                anchors.fill: parent
                fillMode: Image.Stretch
                source: "./image/button-white.png"
            }

            Image {
                id: image_zoomplus
                x: 102
                y: -94
                anchors.right: parent.right
                anchors.rightMargin: 0
                scale: 0.2
                source: "./image/jia+.png"

                MouseArea
                {
                    id: zoomplus_button
                    anchors.fill:parent
                    onClicked:
                    {
                        web_view_map.zoomIn();
                        console.log("zoom in button clicked");
                    }
                }

                states: State {
                    name: "pressed"
                    when: zoomplus_button.pressed
                    PropertyChanges {
                        target: image_zoomplus
                        opacity: 0.1
                    }
                }
            }

            Image {
                id: image_zoomminus
                x: 96
                y: 10
                anchors.right: parent.right
                anchors.rightMargin: 9
                source: "./image/minus.png"

                MouseArea
                {
                    id: zoomminus_button
                    anchors.fill:parent
                    onClicked:
                    {
                        web_view_map.zoomOut();
                        console.log("zoom out button clicked");
                    }
                }

                states: State {
                    name: "pressed"
                    when: zoomminus_button.pressed
                    PropertyChanges {
                        target: image_zoomminus
                        opacity: 0.1
                    }
                }
            }
        }

        ///////////////////////////////////////  center image
        Image {
            id: imagecenter
            source: "./image/center.png"
            scale: 0.600
            anchors.centerIn: parent
        }

        ///////////////////////////////////////  city                // useless in 2012.06.03
        Item {
            id: item_city
//            x: 22
//            y: 244
//            width: 80
//            height: 58
            width: 0
            height: 0
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.leftMargin: 22
            anchors.bottomMargin: 120
            visible: false

            Image {
                id: image_citybg
                opacity: 0.7
                anchors.fill: parent
                source: "./image/button-yellow.png"
            }

            Text {
                id: text1
//                x: 28
//                y: 22
                text: "城市"
                anchors.centerIn: parent
                font.bold: true
                font.pixelSize: 30
            }

            MouseArea
            {
                id: citybutton_MA
                anchors.fill:parent
                onClicked:
                {
                    rectangle_inputcity.state === 'state1' ? rectangle_inputcity.state = "" : rectangle_inputcity.state = 'state1' ;
//                    rectangle_inputcity.x = 200;
                }
            }

            states: State {
                name: "pressed"
                when: citybutton_MA.pressed
                PropertyChanges {
                    target: image_citybg
                    opacity: 0.1
                }
            }
        }

        ///////////////////////////////////////  inputcity           // useless in 2012.06.03
        Rectangle {
            id: rectangle_inputcity
            x: -width
            y: parent.height / 2
//            width: 420
//            height: 100
            width: 0
            height: 0
            color: "#ffffff"
            radius: 8
            visible: false

//            Behavior on x { NumberAnimation{} }

            Rectangle {
                id: rectangle22
                x: 14
                y: 10
                width: 82
                height: 80
                color: "#50f2f7"
                radius: 3

                Text {
                    id: text22
                    x: 8
                    y: 22
                    width: 80
                    height: 20
                    text: "取消"
                    font.pixelSize: 30
                }

                MouseArea
                {
                    anchors.fill:parent
                    onClicked:
                    {
                        rectangle_inputcity.state === 'state1' ? rectangle_inputcity.state = "" : rectangle_inputcity.state = 'state1' ;
//                        rectangle_inputcity.x = -420;
                    }
                }
            }

            Rectangle {
                id: rectangle23
                x: 332
                y: 10
                width: 76
                height: 80
                color: "#50f2f7"
                radius: 3

                Text {
                    id: text23
                    x: 5
                    y: 22
                    width: 80
                    height: 20
                    text: "确定"
                    font.pixelSize: 30
                }

                MouseArea
                {
                    anchors.fill:parent
                    onClicked:
                    {
                        rectangle_inputcity.state === 'state1' ? rectangle_inputcity.state = "" : rectangle_inputcity.state = 'state1' ;
//                        rectangle_inputcity.x = -420;
                        web_view_map.setCity(text_edit_city.text);
                        console.log("set city button clicked");
                    }
                }
            }

            TextEdit {
                id: text_edit_city
                x: 118
                y: 10
                width: 190
                height: 80
                text: "textEdit"
                horizontalAlignment: TextEdit.AlignHCenter
                verticalAlignment: TextEdit.AlignVCenter
                font.pixelSize: 30
            }

            states: [
                State {
                    name: "state1"
                    PropertyChanges {
                        target: rectangle_inputcity
                        x:web_view_map.width / 2 - rectangle_inputcity.width / 2
                    }
                }
            ]

            transitions: [
                Transition {
                    from: ""
                    to: "state1"
                    NumberAnimation
                    {
                        property: "x";
                        duration: 1000
                        easing.type: "InOutQuad"
                    }
                },

                Transition {
                    from: "state1"
                    to: ""
                    NumberAnimation
                    {
                        property: "x"
                        duration: 1000
                        easing.type: "InOutQuad"
                    }
                }
            ]
        }

        //////////////////////////////////////   GPS timer
        Timer
        {
            id:timerUpdatepos
            interval: 10000; running: false; repeat: true; triggeredOnStart : true;
    //        property real lat: 23.0
    //        property real lon: 117.0
            onTriggered:
            {
    //            timerUpdatepos.lat = mainApp.getlatitude();
    //            timerUpdatepos.lon = mainApp.getlongtitude();
                //console.log(web_view_map.lat + " , " + web_view_map.lon);
                web_view_map.setcenter();
            }
        }

        ///////////////////////////////////////  GPS button          // useless in 2012.06.03
        Item {
            id: gps_button
//            x: 20
//            y: 130
//            width: 84
//            height: 84
            width: 0
            height: 0
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.leftMargin: 22
            anchors.bottomMargin: 200
            visible: false

            property bool firstuse: true

            Text {
                id: text_gps
                x: 0
                y: 15
                text: "GPS"
                anchors.centerIn: parent
                font.pixelSize: 40
            }

            Image {
                id: image_gps
                anchors.fill: parent
                opacity: 1
                source: "./image/no.png"
            }

            MouseArea {
                id: gpsmouse_area
                anchors.fill: parent
                onClicked:
                {
                    if (gps_button.firstuse)
                    {
                        mainApp.useInfobox("请设置城市");
                        rectangle_inputcity.state === 'state1' ? rectangle_inputcity.state = "" : rectangle_inputcity.state = 'state1' ;
//                        rectangle_inputcity.x = 200;
                        gps_button.firstuse = false;
                    }
    //                web_view_map.setcenter();
                    else if (timerUpdatepos.running == true)
                    {
//                        mainApp.gpsSwitch();
                        image_gps.opacity = 1;
                        timerUpdatepos.stop();
    //                    timerUpdatepos.running = false;
    //                    timerUpdatepos.repeat = false;
                    }
                    else if (timerUpdatepos.running == false)
                    {
//                        mainApp.gpsSwitch();
                        image_gps.opacity = 0;
                        timerUpdatepos.start();
    //                    timerUpdatepos.running = true;
    //                    timerUpdatepos.repeat = true;
                    }
                }
            }
        }

    }

    //////////////////////////////       new bottom menu for meego N9    // 2012.06.03
    ButtomMenu
    {
        id: bottom_menu
        width: parent.width
//        height: 86
        x: 0
//        y:
        anchors.top: parent.bottom
        anchors.topMargin: -120

        Behavior on anchors.topMargin {
            PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
        }

        onMenu_up_down:
        {
            bottom_menu.anchors.topMargin == -120 ? bottom_menu.anchors.topMargin = -310 : bottom_menu.anchors.topMargin = -120;
        }

        onSwitch_panel:
        {
            web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
            inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
        }
    }

    //////////////////////////////       button which switch between two interfaces  // useless in 2012.06.03
    Rectangle
    {
//        width: 100; height: 60
        width: 0; height: 0
//        color: "red"
//        x:parent.width - 100
//        y:parent.height - 100
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        radius: 30
        gradient: Gradient {
            GradientStop {
                position: 0.00;
                color: "#ff0000";
            }
            GradientStop {
                id: gstop
                position: 0.34;
                color: "#ffef07";
            }
            GradientStop {
                position: 0.78;
                color: "#1f87fd";
            }
            GradientStop {
                position: 1.00;
                color: "#ffffff";
            }
        }
        //        anchors.leftMargin: 0
//        anchors.bottomMargin: 0
        visible: false

        Text {
            id: morefunction
            text: "更多功能"
            anchors.centerIn: parent
        }

        MouseArea {
            id: mouseAreaSE
            anchors.fill: parent
            onClicked:
            {
                web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
                inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
                //item1.state == 'state1' ? item1.state = "" : item1.state = 'state1' ;
            }

        }

        states: State {
            name: "pressed"
            when: mouseAreaSE.pressed
            PropertyChanges { target: gstop; color: "black" }
        }

    }

    //////////////////////////////       second interface : input panel
    Item {
        id: inputpanel
        width: parent.width
        height: parent.height
        y:0
        x:parent.width


        /////////////////////  state 1 : left right position
        states: [
            State {
                name: "state1"
                PropertyChanges {
                    target: inputpanel
                    x:0
                }
            }
        ]

        /////////////////////  transition for state 1
        transitions: [
            Transition {
                from: ""
                to: "state1"
                NumberAnimation
                {
                    property: "x";
                    duration: 300
                    easing.type: "OutQuad"
                }
            },

            Transition {
                from: "state1"
                to: ""
                NumberAnimation
                {
                    property: "x"
                    duration: 300
                    easing.type: "OutQuad"
                }
            }
        ]


        /////////////////////  listview blow the text input
        Rectangle {
            id: page
            width: parent.width - 180
            height: parent.height - searchinput.height - searchinput.y
            x: searchinput.x
            y:searchinput.y + searchinput.height + 5
//            anchors.top: searchinput.bottom
//            anchors.bottomMargin: 5
//            anchors.topMargin: 5

            color: "black"

            // Delegate for the recipes.  This delegate has two modes:
            // 1. List mode (default), which just shows the picture and title of the recipe.
            // 2. Details mode, which also shows the ingredients and method.
            Component {
                id: recipeDelegate

                Item {
                    id: recipe

                    // Create a property to contain the visibility of the details.
                    // We can bind multiple element's opacity to this one property,
                    // rather than having a "PropertyChanges" line for each element we
                    // want to fade.
                    property real detailsOpacity : 0

                    width: listView.width
                    height: 70

                    // A simple rounded rectangle for the background
                    Rectangle {
                        id: background
                        x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                        color: "ivory"
                        border.color: "orange"
                        radius: 5
                    }

                    // This mouse region covers the entire delegate.
                    // When clicked it changes mode to 'Details'.  If we are already
                    // in Details mode, then no change will happen.
                    MouseArea {
                        anchors.fill: parent
                        onClicked: recipe.state = 'Details';
                    }

                    // Lay out the page: picture, title and ingredients at the top, and method at the
                    // bottom.  Note that elements that should not be visible in the list
                    // mode have their opacity set to recipe.detailsOpacity.
                    Row {
                        id: topLayout
                        x: 10; y: 10; height: recipeImage.height; width: parent.width
                        spacing: 10

                        Image {
                            id: recipeImage
                            width: 50; height: 50
                            source: "meego_0.jpg"
                        }

                        Column {
                            width: background.width - recipeImage.width - 20; height: recipeImage.height
                            spacing: 5

                            Text {
                                text: title
                                wrapMode: Text.WrapAnywhere
                                width: parent.width
                                font.bold: true; font.pointSize: 16
                            }

//                            Text {
//                                text: "Ingredients"
//                                font.pointSize: 12; font.bold: true
//                                opacity: recipe.detailsOpacity
//                            }

                            Text {
                                text: addr
                                wrapMode: Text.WordWrap
                                width: parent.width
                                opacity: recipe.detailsOpacity
                            }

                            Text {
                                text: poi
                                wrapMode: Text.WordWrap
                                width: parent.width
                                opacity: recipe.detailsOpacity
                            }
                        }
                    }
// important!!
                    Item {
                        id: details
                        x: 10; width: parent.width - 20
                        anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
                        opacity: recipe.detailsOpacity

// add buttons here
                        Row
                        {
                            anchors.fill: parent
                            spacing: 20

                            TextButton
                            {
                                width: 150
                                height: 50
                                text: "作起点"

                                onClicked:
                                {
                                    web_view_map.start = title;
                                    mainApp.useInfobox("起点：" + web_view_map.start);
                                }
                            }

                            TextButton
                            {
                                width: 150
                                height: 50
                                text: "作终点"

                                onClicked:
                                {
                                    web_view_map.end = title;
                                    mainApp.useInfobox("终点：" + web_view_map.end);
                                }
                            }

                            TextButton
                            {
                                width: 150
                                height: 50
                                text: "看地图"

                                onClicked:
                                {
                                    web_view_map.setsearchresult_poi(poi);
                                    web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
                                    inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
                                }
                            }
                        }
//                        Text {
//                            id: methodTitle
//                            anchors.top: parent.top
//                            text: "Method"
//                            font.pointSize: 12; font.bold: true
//                        }

//                        Flickable {
//                            id: flick
//                            width: parent.width
//                            anchors { top: methodTitle.bottom; bottom: parent.bottom }
//                            contentHeight: methodText.height
//                            clip: true

//                            Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width }
//                        }

//                        Image {
//                            anchors { right: flick.right; top: flick.top }
//                            source: "content/pics/moreUp.png"
//                            opacity: flick.atYBeginning ? 0 : 1
//                        }

//                        Image {
//                            anchors { right: flick.right; bottom: flick.bottom }
//                            source: "content/pics/moreDown.png"
//                            opacity: flick.atYEnd ? 0 : 1
//                        }
                    }

                    // A button to close the detailed view, i.e. set the state back to default ('').
                    TextButton {
                        y: 10
                        anchors { right: background.right; rightMargin: 10 }
                        opacity: recipe.detailsOpacity
                        text: "Close"

                        onClicked: recipe.state = '';
                    }

                    states: State {
                        name: "Details"

                        PropertyChanges { target: background; color: "white" }
                        PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
                        PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
                        PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view

                        // Move the list so that this item is at the top.
                        PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }

                        // Disallow flicking while we're in detailed view
                        PropertyChanges { target: recipe.ListView.view; interactive: false }
                    }

                    transitions: Transition {
                        // Make the state changes smooth
                        ParallelAnimation {
                            ColorAnimation { property: "color"; duration: 500 }
                            NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                        }
                    }
                }
            }

            // The actual list
            ListView {
                id: listView
                anchors.fill: parent
                model: addressmodel
                delegate: recipeDelegate
            }

            /////////////////////  state 1 : up down position
            states: [
                State {
                    name: "state1"
                    PropertyChanges {
                        target: page
                        y: parent.parent.height
                    }
                }
            ]

            /////////////////////  transition for state 1
            transitions: [
                Transition {
                    from: ""
                    to: "state1"
                    NumberAnimation
                    {
                        property: "y";
                        duration: 1000
                        easing.type: "InOutQuad"
                    }
                },

                Transition {
                    from: "state1"
                    to: ""
                    NumberAnimation
                    {
                        property: "y"
                        duration: 1000
                        easing.type: "InOutQuad"
                    }
                }
            ]
        }

        /////////////////////  search input and button
        Rectangle
        {
            id:searchinput
            //anchors.fill: parent
            width: parent.width - 20
            height: 70
            x: 10
            y:10
            color: "#cfcff5"
            radius: 15

            ////////////////  for input
            Rectangle
            {
                width: searchinput_text.width
                height: searchinput_text.height
                x: searchinput_text.x
                y: searchinput_text.y
                color: "white"
            }

            TextInput
            {
                id:searchinput_text
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width - 200
                x:20
                font.pointSize: 24
                //color: "white"
            }

            ////////////////   button
            TextButton
            {
                id: enter_input
                text: "搜索"
                width: 100
                height: parent.height - 20
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 25
                //x: parent.right - 150

                onClicked:
                {
                    web_view_map.search(searchinput_text.text);
                }
            }
        }

        /////////////////////  search line button
        TextButton
        {
            id: searchline
            width: 100
            height: 60
            radius: 20
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.top: searchinput.bottom
            anchors.topMargin: 50
            text: "路线"
            //font.bold: true; font.pointSize: 16

            onClicked:
            {
                page.state === 'state1' ? page.state = "" : page.state = 'state1' ;
                searchline_panel.state === 'state1' ? searchline_panel.state = "" : searchline_panel.state = 'state1' ;
            }
        }

        ////////////////////   search line panel switch from listview
        Item {
            id: searchline_panel
            width: page.width
            height: page.height
            x: page.x
            y: parent.height

            Rectangle
            {
                anchors.fill: parent
                color: "ivory"
                border.color: "orange"
                radius: 5
            }

            Column
            {
                anchors.fill: parent
                anchors.topMargin: 15
                anchors.leftMargin: 15
                spacing: 20

                Text {
                    id: textstart
                    text: "起点：" + web_view_map.start
                    font.bold: true; font.pointSize: 16
                }

                Text {
                    id: textend
                    text: "终点：" + web_view_map.end
                    font.bold: true; font.pointSize: 16
                }

                Row
                {
                    id: busdrivebutton
                    spacing: 10

                    TextButton
                    {
                        text: "公交"

                        onClicked:
                        {
                            web_view_map.getRoute();
                            web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
                            inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
                        }
                    }

                    TextButton
                    {
                        text: "驾车"

                        onClicked:
                        {
                            web_view_map.getDrive();
                            web_view_map.state === 'state1' ? web_view_map.state = "" : web_view_map.state = 'state1' ;
                            inputpanel.state === 'state1' ? inputpanel.state = "" : inputpanel.state = 'state1' ;
                        }
                    }
                }

                Flickable {
                    id: flick
                    width: parent.width
//                    anchors { top: busdrivebutton.bottom; bottom: parent.bottom }
                    height:parent.height - 75 - textstart.height - textend.height - busdrivebutton.height
                    contentHeight: linedetail.height
                    clip: true

                    Text { id: linedetail; text: js.route; wrapMode: Text.WordWrap; width: parent.width }
                }

            }

            /////////////////////  state 1 : up down position
            states: [
                State {
                    name: "state1"
                    PropertyChanges {
                        target: searchline_panel
                        y:searchinput.y + searchinput.height + 5
                    }
                }
            ]

            /////////////////////  transition for state 1
            transitions: [
                Transition {
                    from: ""
                    to: "state1"
                    NumberAnimation
                    {
                        property: "y";
                        duration: 1000
                        easing.type: "InOutQuad"
                    }
                },

                Transition {
                    from: "state1"
                    to: ""
                    NumberAnimation
                    {
                        property: "y"
                        duration: 1000
                        easing.type: "InOutQuad"
                    }
                }
            ]
        }

    }

    ListModel
    {
        id:addressmodel
//        ListElement {
//            title:"null"
//            addr:"  "
//            poi: "  "
//        }
    }

}
